<template>
  <div>
    <Contentheader :headerInfo="headerInfo" @getUserList="getUserList" />

    <el-card>
      <template>
        <el-table
          :data="userList"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"> </el-table-column>
          <el-table-column prop="id" label="ID"> </el-table-column>
          <el-table-column prop="Username" label="用户名"> </el-table-column>
          <el-table-column prop="Realname" label="真实姓名"> </el-table-column>
          <el-table-column prop="Phone" label="电话"> </el-table-column>
          <el-table-column prop="Type" label="类型"> </el-table-column>
          <el-table-column prop="date" label="注册时间"> </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-link type="primary" @click="resetPwd(scope.row.id)"
                >重置密码</el-link
              >
              <el-link
                class="btndel"
                @click="btndel(scope.row.id)"
                type="danger"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页功能组件 -->
      <Pagination
        :queryInfo="queryInfo"
        :totalNum="totalNum"
        @getPageNo="getPageNo"
      />
    </el-card>

    <!-- 重置密码对话框 -->
    <el-dialog
      title="重置密码"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="passForm"
        status-icon
        :rules="passRules"
        ref="passRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="passForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="passForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="resetPwdBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Contentheader from "@/components/Contentheader";
import Pagination from "@/components/Pagination";
export default {
  name: "Usermanage",
  components: { Contentheader, Pagination },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.passForm.checkPass !== "") {
          this.$refs.passRuleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // Contentheader组件的数据
      headerInfo: {
        title: "用户信息管理",
        rightInfo: {
          iptMessage: "请输入用户名",
        },
      },
      //#region 分页功能data数据
      // 获取用户列表的参数对象
      queryInfo: {
        // 当前第几页
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 3,
      },
      // 物品总数
      totalNum: 0,
      //#endregion

      // 重置密码对话框的显示和隐藏
      dialogVisible: false,
      // 重置密码的表单数据
      passForm: {
        resetPwdUserId: 0, // 重置密码用户的id
        pass: "",
        checkPass: "",
      },
      // 重置密码的验证规则
      passRules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  mounted() {
    // 通知Vuex向axios发送请求获取数据
    this.getUserList();
    // 获取用户数量
    this.$store.dispatch("usermanage/totalUserLists");
  },
  computed: {
    ...mapState("usermanage", [
      "userList",
      "totalUser",
      "delUserMsg",
      "resetPwdMsg",
    ]),
  },
  methods: {
    // 刷新页面时获取用户信息数据
    getUserList(queryInfo = this.queryInfo) {
      this.$store.dispatch(
        "usermanage/getUserLists",
        JSON.stringify(queryInfo)
      );
    },
    // 自定义事件的回调函数--获取当前第几页methods方法
    getPageNo(queryInfo) {
      this.getUserList(queryInfo);
    },
    // 删除用户事件
    btndel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("usermanage/delUsers", id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 重置密码链接
    resetPwd(id) {
      this.passForm.resetPwdUserId = id;
      this.dialogVisible = true;
    },
    // 重置密码对话框关闭事件
    handleClose() {
      this.$refs.passRuleForm.resetFields();
      this.dialogVisible = false;
    },
    // 重置密码按钮
    resetPwdBtn() {
      this.$refs.passRuleForm.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        await this.$store.dispatch(
          "usermanage/resetUserPwds",
          JSON.stringify(this.passForm)
        );
        if (this.resetPwdMsg != null) {
          this.$message.success("修改密码成功！");
          // 刷新页面
          this.getUserList();
        } else {
          this.$message.error("修改密码失败！");
        }
        this.dialogVisible = false;
        this.handleClose();
      });
    },

    //全选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  watch: {
    // 用户的数量
    totalUser: {
      handler(newVal) {
        this.totalNum = newVal[0].totalNum;
      },
    },
    // 删除用户的提示
    delUserMsg: {
      handler(newVal) {
        // 删除成功后刷新页面
        this.getUserList();
        // 重新获取用户数量
        this.$store.dispatch("usermanage/totalUserLists");
      },
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
  .btndel {
    margin-left: 10px;
  }
}
</style>
